<template>
    <div>
        <el-form ref="ruleFormRef" style="width: 360px;margin:0px auto" :model="roleInfo" :rules="rules"
            label-width="auto" status-icon>
            <el-form-item label="角色名称：" prop="roleName">
                <el-input v-model="roleInfo.roleName" />
            </el-form-item>
            <el-form-item>
                <el-button style="margin: auto;" type="primary" @click="roleInfoUpdate(ruleFormRef)">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, type FormInstance } from 'element-plus'

import http from '@/http'
const route = useRoute()
const router = useRouter()

const roleInfo = reactive({
    roleId: 0,
    roleName: "",
    createPerson: "",
    createDate: "2024-03-22T19:32:48.7645437",
    revisePerson: null,
    reviseDate: null,
    isDelete: false
})

const getRoleInfo = () => {
    http.get("/api/Role/GetRoleInfoByRoleId?roleId=" + route.query.roleId).then(res => {
        roleInfo.roleId = res.data.roleId;
        roleInfo.roleName = res.data.roleName;
        roleInfo.createPerson = res.data.createPerson;
        roleInfo.createDate = res.data.createDate;
        roleInfo.revisePerson = res.data.revisePerson;
        roleInfo.reviseDate = res.data.reviseDate;
        roleInfo.isDelete = res.data.isDelete;
    })
}

// 校验规则
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
    ]
})

// 用户添加
const roleInfoUpdate = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            // 用户修改功能
            http.put("/api/Role/RoleUpdateNew", roleInfo).then(res => {
                if (res.data > 0) {
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                        duration: 1000
                    });
                    router.push('/roleListView');
                }
                else if (res.data == -1) {
                    ElMessage({
                        type: 'error',
                        message: '角色名重复，请重新输入！',
                        duration: 1000
                    })
                }
                else {
                    ElMessage({
                        type: 'error',
                        message: '修改失败',
                        duration: 1000
                    })
                }
            })
        }
    })
}


onMounted(() => {
    getRoleInfo();
})
</script>

<style scoped></style>